<template>
    <el-row>
        <div class="sh">
            <el-select v-model="roleid" placeholder="选择角色" class="shpro" @change="rolechange">
                <el-option v-for="(r, index) in roles" :key="r.id" :label="r.roleName" :value="r.id"></el-option>
            </el-select>

            <div class="gongneng">
                <el-button type="primary" class="addbtn" @click="saveUsrPermissions">保存</el-button>
            </div>
        </div>

        <el-col>
            <el-tree v-loading="loading" element-loading-spinner="el-icon-loading" :data="data" show-checkbox
                default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps">
            </el-tree>
        </el-col>
    </el-row>
</template>

<script>
    // import $ from '@/api/api';
    export default {
        data() {
            return {
                roles: [],
                roleid: 2,
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                checkedkeys: [],
                loading: true
            };
        },
        mounted() {
            this.getRolesExceptSuper();
            this.init();
        },
        methods: {
            getRolesExceptSuper() {
                this.$api.qxcd.getRoles({
                    usercode: this.usercode
                }).then(res => {
                    if (res.code == '0') {
                        this.roles = res.data;
                    }
                })
            },
            init() {
                this.$api.qxcd.getRolePermissionTree({
                    roleid: this.roleid
                }).then(resp => {
                    if (resp.code != 0) {
                        this.$message.error(resp.msg);
                    } else {
                        console.log(resp)
                        this.data = resp.data;
                        this.getRolePermissionTreeCheckedKeys();
                        this.loading = false;
                    }
                })
            },
            rolechange(value) {
                this.loading = true;
                this.roleid = value;
                this.init();
            },
            ppp() {
                var arr = this.$refs.tree.getCheckedKeys();
                //console.log(arr)
                var that = this;
                arr.forEach((i, n) => {
                    var node = that.$refs.tree.getNode(i);
                    //console.log(node.isLeaf)
                    if (node.isLeaf) {
                        that.$refs.tree.setChecked(node, true);
                    }
                });
            },

            saveUsrPermissions() {
                var arr = this.$refs.tree.getCheckedKeys();
                var halfarr = this.$refs.tree.getHalfCheckedKeys();
                halfarr.forEach((item, index) => {
                    arr.push(item)
                })

                this.$confirm('确认保存吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.qxcd.saveUsrPermissions({
                        roleid: this.roleid,
                        permissionStr: arr.toString()
                    }).then(resp => {
                        if (resp.code != 0) {
                            this.$message.error(resp.msg);
                        } else {
                            this.$message({
                                type: 'success',
                                message: '已保存'
                            });
                            this.init();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            getRolePermissionTreeCheckedKeys() {
                this.$api.qxcd.getRolePermissionTreeCheckedKeys({
                    roleid: this.roleid
                }).then(resp => {
                    if (resp.code != 0) {
                        this.$message.error(resp.msg);
                    } else {
                        this.checkedkeys = resp.data;
                        //注： 此方法回显 会自动选中父节点，从而自动选中其他未选中的兄弟节点；解决方案如下，
                        // this.$refs.tree.setCheckedKeys(this.checkedkeys);

                        //利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。这样利用tree的API就实现了正确的回显效果
                        var that = this;
                        this.checkedkeys.forEach((i, n) => {
                            var node = that.$refs.tree.getNode(i);
                            console.log(i)
                            if (node.isLeaf) {
                                that.$refs.tree.setChecked(node, true);
                            }
                        });
                    }
                })
            }

        }
    };
</script>

<style>
    .sh {
        margin: 15px 0 15px 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .shpro {
        float: left;
        margin: 0 10px 0 0;
    }

    .gongneng {
        width: 100px;
        float: right;
        margin: 15px 100px 15px 0;
    }
</style>
